<template>
    <div class="el-input el-input--large" :class="{ 'is-disabled': disabled }">
        <div class="el-input__wrapper">
            <input class="el-input__inner" :disabled="disabled" :type="type" v-model="dt1" />
        </div>
    </div>
</template>

<script setup>
import { ref, watchEffect, watch } from 'vue'
import mydate from '../mydate';
const props = defineProps({
    modelValue: String,
    type: {
        type: String,
        default: "date"
    },
    size: {
        type: String,
        default: "large"
    },
    disabled: {
        type: Boolean,
        default: false,
    }
})

const emits = defineEmits(["update:modelValue"]);
const dt1 = ref(null)

watchEffect(() => {
    if (props.modelValue) {
        if (props.type == "datetime") {
            dt1.value = mydate.formatDate(mydate.parseDate(props.modelValue), "yyyy-MM-dd HH:II:ss");
        } else {
            dt1.value = mydate.formatDate(mydate.parseDate(props.modelValue), "yyyy-MM-dd");
        }
    } else {
        dt1.value = "";
    }
})

watch(dt1, (val) => {
    if (!props.disabled) {
        let v1 = mydate.parseDate(val);
        emits("update:modelValue", v1);
    }
})

</script>